<template>
    <div class="chat-history">
        <el-descriptions class="margin-top" title="聊天室信息" :column="3" :size="size" border>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <user />
                        </el-icon>
                        房主名称
                    </div>
                </template>
                {{data.chatRoomDetail.houseUserName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <iphone />
                        </el-icon>
                        聊天人名称
                    </div>
                </template>
                {{data.chatRoomDetail.chatUserName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <location />
                        </el-icon>
                        创建时间
                    </div>
                </template>
                {{data.chatRoomDetail.createTime}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <tickets />
                        </el-icon>
                        学校
                    </div>
                </template>
                {{data.chatRoomDetail.schoolName}}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { detail } from '../../api/chat/chatRoom'
import { useRoute } from "vue-router";
import { onMounted } from '@vue/runtime-core'
export default {
    setup() {
        const route = useRoute();
        const data = reactive({
            chatRoomDetail: '',
            chatRoomUuid: route.query.uuid
        })
        
        /**
         * 查询详情
         */
        const chatRoomDetail = () => {
            detail(data.chatRoomUuid).then(res => {
                data.chatRoomDetail = res.data
            })
        }
        onMounted(() => {
            chatRoomDetail()
        })
        return {
            data
        }
    }
}
</script>

<style>

</style>
